<template>
    <div>
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">学院重点项目进程管理</h2>
            </div>
        </el-card>
        <br />
        <el-card>
            <el-row>
                <el-col :span="4">
                    <el-input v-model="projectName"><template slot="prepend">名称：</template></el-input>
                </el-col>
                <el-col :span="1" style="margin-left: 5px">
                    <el-button type="primary" @click="search">查询</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                    <el-button type="info" @click="drawer = true">新增</el-button>
                </el-col>
            </el-row>
            <br />
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="projectName" label="项目名称"> </el-table-column>
                <el-table-column prop="departmentId" label="责任部门"> </el-table-column>
                <el-table-column prop="createUserId" label="创建人">
                    <template slot-scope="scope">
                        {{ getCreateUserName(scope.row.createUserId) }}
                    </template>
                </el-table-column>
                <el-table-column label="已创建报表编辑" width="500">
                    <template slot-scope="scope">
                        <div v-for="(item, i) in scope.row.schoolReportFormVos" style="padding: 2px 3px">
                            <span style="padding: 0 5px">{{ item.projectGenerateTime }}</span>
                            <!-- <el-button plain size="mini" type="primary" @click="editReportForms(item.reportFormBasicInfo.id)">编辑</el-button> -->
                            <el-button plain size="mini" type="danger" @click="deleteReportForms(item.reportFormBasicInfo.id)"
                                >删除</el-button
                            >
                            <el-button plain size="mini" type="info" @click="viewReportForms(item.reportFormBasicInfo.id)">查看</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="项目管理操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="createReportForm(scope.row.reportId)">创建报表</el-button>
                        <el-button size="mini" type="primary" @click="getEditReport(scope.row.reportId)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteReport(scope.row.reportId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--新增学院重点项目进程-->
        <el-drawer :visible.sync="drawer" :with-header="false" size="100%">
            <SchoolAddDrawerContent @func="backDrawer"></SchoolAddDrawerContent>
        </el-drawer>

        <!--编辑学院重点项目进程-->
        <el-drawer :visible.sync="editDrawer" :with-header="false" size="100%">
            <SchoolEditDrawerContent @func1="backDrawer" :editInfo="editData" v-if="editData"></SchoolEditDrawerContent>
        </el-drawer>

        <!--创建项目报表-->
        <el-drawer :visible.sync="reportDrawer" :with-header="false" size="100%">
            <reportForms v-on:cancelCreateReport="cancelCreateReportForm" :reportForm="createReportFormData"></reportForms>
        </el-drawer>

        <!--查看项目报表-->
        <el-drawer :visible.sync="reportViewDrawer" :with-header="false" size="100%">
            <reportFormsView v-on:cancelCreateReport="cancelCreateReportForm" :reportForm="createReportFormData"></reportFormsView>
        </el-drawer>
    </div>
</template>

<script>
import reportFormsApi from '../../../../api/reportForms';
import reportForms from '../../../reportForms';
import SchoolAddDrawerContent from './SchoolAddDrawerContent.vue';
import SchoolEditDrawerContent from './SchoolEditDrawerContent';
import reportFormsView from '../../../reportForms/reportFormsView';
import moment from 'moment';
export default {
    components: {
        reportForms,
        SchoolAddDrawerContent,
        SchoolEditDrawerContent,
        reportFormsView
    },
    data() {
        return {
            // 报表查看
            reportViewDrawer: false,
            // 列表数据：
            tableData: [],
            // 分页信息
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            // 查询的名称
            projectName: '',
            reportDrawer: false,
            moneyDialogVisible: false,
            taskDialogVisible: false,
            memberName: '',
            memberId: '',
            memberDialogVisible: false,
            mainTarget: '',
            responsibleDepart: '',
            drawerProjectName: '',
            //新增学院重点项目进程界面
            drawer: false,
            // 编辑学院重点项目进程界面
            editDrawer: false,
            // 获取到到edit对象
            editData: {},
            // 创建报表获取的数据
            createReportFormData: {}
        };
    },
    methods: {
        editReportForms() {},
        async deleteReportForms(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该报表, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err);
            if (confirmResult != 'confirm') {
                return;
            }
            if (confirmResult == 'confirm') {
                await reportFormsApi.deleteReportForm(1, id).then((res) => {
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                    this.getTableData();
                    this.$forceUpdate();
                });
            }
        },
        async viewReportForms(id) {
            await reportFormsApi.findReportForm(1, id).then((res) => {
                this.reportViewDrawer = true;
                setTimeout(() => {
                    this.createReportFormData = res.data;
                }, 500);
            });
        },
        // 创建报表
        createReportForm(id) {
            // await reportFormsApi.findByReportId(1, id).then((res) => {
            //     this.createReportFormData = res.data;
            //     this.reportDrawer = true;
            // });
            let payload = {
                isSchool: 1,
                reportId: id
            };
            this.$store.dispatch('findByReportId', payload).then((res) => {
                this.reportDrawer = true;

                setTimeout(() => {
                    this.createReportFormData = res.data;
                }, 500);
            });
        },

        // 获取列表数据
        async getTableData() {
            let payload = {
                pageInfo: this.pageInfo,
                isSchool: 1
            };
            this.$store.dispatch('findAllReport', payload).then((res) => {
                this.tableData = res.data;
                for (let i = 0; i < this.tableData.length; ++i) {
                    for (let j = 0; j < this.tableData[i].schoolReportFormVos.length; ++j) {
                        this.tableData[i].schoolReportFormVos[j].projectGenerateTime = moment(
                            this.tableData[i].schoolReportFormVos[j].reportFormBasicInfo.projectGenerateTime
                        ).format('YYYY-MM-DD');
                    }
                }
                console.log(res.data);
            });
        },
        // 关闭新增drawer窗口
        backDrawer() {
            this.drawer = false;
            this.editDrawer = false;
            this.getTableData();
            // 强制刷新 解决有数据不渲染的问题
            this.$forceUpdate();
        },
        // 获取创建人名字
        getCreateUserName(id) {
            let obj = {};
            obj = this.$store.state.teacher.teachers.find((item) => {
                return item.id === id;
            });
            return obj.name;
        },
        // 删除项目管理表
        async deleteReport(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err);
            if (confirmResult != 'confirm') {
                return;
            }
            if (confirmResult == 'confirm') {
                await reportFormsApi.deleteReport(1, id).then((res) => {
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                    this.getTableData();
                });
            }
        },
        // 根据id查询数据
        async getEditReport(id) {
            await reportFormsApi.findByReportId(1, id).then((res) => {
                this.editDrawer = true;
                setTimeout(() => {
                    this.editData = res.data;
                }, 500);
            });
        },
        async search() {
            await reportFormsApi.getByName(1, this.projectName).then((res) => {
                this.tableData = res.data;
            });
        },

        cancelCreateReportForm() {
            this.getTableData();
            this.reportDrawer = false;
            this.reportViewDrawer = false;
        }
    },
    created() {
        this.getTableData();
        // 获取所有老师信息
        this.$store.dispatch('getTeachers');
    }
};
</script>

<style scoped>
.header-content {
    padding: 15px;
}
.header-card {
    background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
    height: 45px;
    line-height: 45px;
}
div /deep/ .el-card__header {
    padding: 0;
}
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
.drawer-card {
    padding: 100px 100px;
}
.inner-drawer-card {
    border: 2px #dddddd solid;
}
</style>